<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 知籁平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .user-sidebar {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }
        .user-sidebar .nav-link {
            color: #495057;
            border-radius: 5px;
            padding: 10px 15px;
            margin-bottom: 5px;
        }
        .user-sidebar .nav-link:hover {
            background-color: #e9ecef;
        }
        .user-sidebar .nav-link.active {
            background-color: #007bff;
            color: #fff;
        }
        .user-sidebar .nav-link i {
            width: 20px;
            text-align: center;
            margin-right: 8px;
        }
        .profile-card {
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .avatar-container {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            overflow: hidden;
            border-radius: 50%;
            border: 5px solid #f8f9fa;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }
        .avatar-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .stat-card {
            border-radius: 10px;
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .alert {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <header th:replace="common/header :: header"></header>

    <div class="container mt-4 mb-5">
        <div class="row">
            <!-- 左侧边栏 -->
            <div class="col-md-3 mb-4">
                <div class="user-sidebar">
                    <div class="text-center mb-4">
                        <div class="avatar-container">
                            <img th:src="${user.avatar != null ? user.avatar : '/static/images/default-avatar.png'}" 
                                 alt="用户头像" id="avatarImg">
                        </div>
                        <h5 th:text="${user.nickname != null ? user.nickname : user.username}">用户昵称</h5>
                        <p class="text-muted" th:text="${user.accountLevel}">普通用户</p>
                    </div>
                    
                    <div class="nav flex-column nav-pills">
                        <a class="nav-link active" href="/user/profile">
                            <i class="fa fa-user"></i> 个人资料
                        </a>
                        <a class="nav-link" href="/user/downloads">
                            <i class="fa fa-download"></i> 下载历史
                        </a>
                        <a class="nav-link" href="/user/collections">
                            <i class="fa fa-star"></i> 我的收藏
                        </a>
                        <a class="nav-link" href="/user/requests">
                            <i class="fa fa-list"></i> 我的请求
                        </a>
                        <a class="nav-link" href="/user/change-password">
                            <i class="fa fa-lock"></i> 修改密码
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="col-md-9">
                <!-- 用户统计信息 -->
                <div class="row">
                    <div class="col-md-4 mb-4">
                        <div class="card stat-card text-center h-100">
                            <div class="card-body">
                                <i class="fa fa-download fa-2x text-primary mb-3"></i>
                                <h5 class="card-title">今日下载</h5>
                                <p class="card-text font-weight-bold">
                                    <span th:text="${user.usedDownloads}">0</span> / 
                                    <span th:text="${user.dailyDownloadLimit}">5</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card stat-card text-center h-100">
                            <div class="card-body">
                                <i class="fa fa-star fa-2x text-warning mb-3"></i>
                                <h5 class="card-title">我的积分</h5>
                                <p class="card-text font-weight-bold" th:text="${user.points}">0</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card stat-card text-center h-100">
                            <div class="card-body">
                                <i class="fa fa-calendar fa-2x text-success mb-3"></i>
                                <h5 class="card-title">注册时间</h5>
                                <p class="card-text" th:text="${#temporals.format(user.createdAt, 'yyyy-MM-dd')}">2023-07-01</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 个人资料卡片 -->
                <div class="card profile-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">个人资料</h5>
                        <button class="btn btn-primary btn-sm" id="editProfileBtn">
                            <i class="fa fa-pencil"></i> 编辑资料
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success" id="successAlert">资料更新成功</div>
                        <div class="alert alert-danger" id="errorAlert"></div>
                        
                        <!-- 资料显示区域 -->
                        <div id="profileInfo">
                            <div class="row mb-3">
                                <div class="col-md-3 font-weight-bold">用户名</div>
                                <div class="col-md-9" th:text="${user.username}">username</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-3 font-weight-bold">电子邮箱</div>
                                <div class="col-md-9" th:text="${user.email}">example@example.com</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-3 font-weight-bold">昵称</div>
                                <div class="col-md-9" th:text="${user.nickname}">昵称</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-3 font-weight-bold">用户等级</div>
                                <div class="col-md-9" th:text="${user.accountLevel}">普通用户</div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-3 font-weight-bold">每日下载限制</div>
                                <div class="col-md-9" th:text="${user.dailyDownloadLimit} + ' 次'">5次</div>
                            </div>
                        </div>
                        
                        <!-- 资料编辑表单 -->
                        <form id="profileForm" style="display: none;">
                            <div class="form-group row">
                                <label for="username" class="col-md-3 col-form-label">用户名</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="username" name="username" 
                                           th:value="${user.username}" required>
                                    <div class="invalid-feedback" id="usernameError"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="email" class="col-md-3 col-form-label">电子邮箱</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control" id="email" name="email" 
                                           th:value="${user.email}" required>
                                    <div class="invalid-feedback" id="emailError"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="nickname" class="col-md-3 col-form-label">昵称</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="nickname" name="nickname" 
                                           th:value="${user.nickname}">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="avatar" class="col-md-3 col-form-label">头像URL</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="avatar" name="avatar" 
                                           th:value="${user.avatar}">
                                    <small class="form-text text-muted">输入头像图片的URL地址</small>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-9 offset-md-3">
                                    <button type="submit" class="btn btn-primary mr-2">保存</button>
                                    <button type="button" class="btn btn-secondary" id="cancelEditBtn">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 编辑按钮点击
            $('#editProfileBtn').click(function() {
                $('#profileInfo').hide();
                $('#profileForm').show();
                $(this).hide();
            });
            
            // 取消编辑
            $('#cancelEditBtn').click(function() {
                $('#profileForm').hide();
                $('#profileInfo').show();
                $('#editProfileBtn').show();
                $('.alert').hide();
                $('.is-invalid').removeClass('is-invalid');
            });
            
            // 用户名验证
            $('#username').on('blur', function() {
                const username = $(this).val();
                const originalUsername = '[[${user.username}]]';
                
                if (username !== originalUsername) {
                    // 检查用户名是否可用
                    $.get('/api/auth/check-username?username=' + username, function(response) {
                        if (response.status === 200 && response.data === true) {
                            $('#username').removeClass('is-invalid').addClass('is-valid');
                            $('#usernameError').hide();
                        } else {
                            $('#username').removeClass('is-valid').addClass('is-invalid');
                            $('#usernameError').text('该用户名已被使用').show();
                        }
                    });
                }
            });
            
            // 邮箱验证
            $('#email').on('blur', function() {
                const email = $(this).val();
                const originalEmail = '[[${user.email}]]';
                
                if (email !== originalEmail && /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
                    // 检查邮箱是否可用
                    $.get('/api/auth/check-email?email=' + email, function(response) {
                        if (response.status === 200 && response.data === true) {
                            $('#email').removeClass('is-invalid').addClass('is-valid');
                            $('#emailError').hide();
                        } else {
                            $('#email').removeClass('is-valid').addClass('is-invalid');
                            $('#emailError').text('该邮箱已被注册').show();
                        }
                    });
                }
            });
            
            // 表单提交
            $('#profileForm').submit(function(e) {
                e.preventDefault();
                
                // 隐藏之前的提示
                $('.alert').hide();
                
                // 获取表单数据
                const userData = {
                    username: $('#username').val(),
                    email: $('#email').val(),
                    nickname: $('#nickname').val() || $('#username').val(),
                    avatar: $('#avatar').val()
                };
                
                // 发送更新请求
                $.ajax({
                    url: '/api/user/info',
                    type: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify(userData),
                    success: function(response) {
                        if (response.status === 200) {
                            // 更新成功，刷新页面
                            $('#successAlert').show();
                            setTimeout(function() {
                                location.reload();
                            }, 1500);
                        } else {
                            // 显示错误信息
                            $('#errorAlert').text(response.message).show();
                        }
                    },
                    error: function(xhr) {
                        // 显示错误信息
                        let errorMsg = '更新失败，请稍后重试';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        $('#errorAlert').text(errorMsg).show();
                    }
                });
            });
            
            // 头像URL预览
            $('#avatar').on('input', function() {
                const url = $(this).val();
                if (url) {
                    $('#avatarImg').attr('src', url);
                } else {
                    $('#avatarImg').attr('src', '/static/images/default-avatar.png');
                }
            });
        });
    </script>
</body>
</html> 